﻿<template>
  <a-drawer
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-form-model-item label="货位编号" prop="Code">
          <a-input v-model="entity.Code" disabled placeholder="系统自动生成" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="货位名称" prop="Name">
          <a-input v-model="entity.Name" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="仓库" prop="StorId">
          <!-- <a-tree-select
            allowClear
            :treeData="ParentIdTreeData"
            placeholder="请选择隶属机构"
            @change="SelectOrgan"
            v-model="entity.StorId"
          ></a-tree-select> -->

          <a-select @select="GetStorAreaList" v-model="entity.StorId" allowClear placeholder="收货仓库">
            <a-select-option v-for="item in ParentIdTreeData" :value="item.Id" :key="item.Id">
              {{ item.Name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="库区" prop="AreaId">
          <a-select @change="ListName" allowClear v-model="entity.AreaId">
            <a-select-option v-for="(item, index) in LanewayList" :value="item.Id" :key="index"
              >{{ item.Name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="港道编号" prop="LanewayId">
          <a-input v-model="entity.LanewayId" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="货架" prop="RackId">
          <a-select v-model="entity.RackId" @change="Rackchange">
            <a-select-option v-for="(item, index) in RackList" :value="item.Id" :key="index"
              >{{ item.Name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="项目" prop="ProjectId">
          <ProjectSelect v-model="entity.ProjectId" @select="project"></ProjectSelect>
        </a-form-model-item>
        <a-form-model-item label="层级" prop="Ceng">
          <!-- <a-input v-model="entity.Ceng" autocomplete="off" disabled="false" /> -->
          <a-select v-model="entity.Ceng" @change="Rackchanges">
            <a-select-option v-for="(item, index) in ceng" :value="item" :key="index">
              {{ index + 1 }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="最大容量" prop="Maximum">
          <a-input v-model="entity.Maximum" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="剩余容量" prop="OverVol">
          <a-input v-model="entity.OverVol" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="是否禁用" prop="IsForbid">
          <a-radio-group v-model="entity.IsForbid" :default-value="true" button-style="solid">
            <a-radio-button :value="true"> 启用 </a-radio-button>
            <a-radio-button :value="false"> 停用 </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否默认" prop="IsDefault">
          <a-radio-group v-model="entity.IsDefault" :default-value="false" button-style="solid">
            <a-radio-button :value="true"> 是 </a-radio-button>
            <a-radio-button :value="false"> 否 </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <!-- 后端字段,前端不显示 -->
        <!-- <a-form-model-item label="锁类型" prop="LockType">
          <a-radio-group v-model="entity.LockType" :default-value="0" button-style="solid">
            <a-radio-button :value="1"> 入库锁 </a-radio-button>
            <a-radio-button :value="2"> 出库锁</a-radio-button>
            <a-radio-button :value="0"> 没有锁</a-radio-button>
          </a-radio-group>
        </a-form-model-item> -->
        <a-form-model-item label="纬度" prop="Latitude">
          <a-input v-model="entity.Latitude" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="经度" prop="Longitude">
          <a-input v-model="entity.Longitude" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="长度" prop="PhysicalLong">
          <a-input v-model="entity.PhysicalLong" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="宽度" prop="Physicalwidth">
          <a-input v-model="entity.Physicalwidth" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="高度" prop="Physicalheight">
          <a-input v-model="entity.Physicalheight" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="Remarks">
          <a-textarea v-model="entity.Remarks" autocomplete="off" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button
        :style="{ marginRight: '8px' }"
        @click="
          () => {
            this.visible = false
            this.$refs['form'].clearValidate()
          }
        "
        >取消</a-button
      >
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
// import Organization from '../../../components/SelectOrganization/Organization.vue'
// import ProjectSelect from '@/components/PB/ProjectSelect'
export default {
  components: {
    // Organization,
    // ProjectSelect
  },
  props: {
    parentObj: { type: Object }
  },
  data() {
    const validatePass2 = (rule, value, callback) => {
      console.log(rule, value, callback)
      console.log(rule)
      console.log(value)

      if (value === '') {
        callback(new Error('请选择仓库'))
      } else {
        callback()
      }
    }
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      RackList: [], //货架list
      entity: {
        Code: '',
        Name: '',
        StorId: '',
        AreaId: '',
        RackId: '',
        IsForbid: true,
        IsDefault: false,
        Remarks: '',
        Ceng: '',
        ProjectId: ''
      },
      rules: {
        Name: [{ required: true, message: '请输入货位名称', trigger: 'blur' }],

        StorId: [{ required: true, validator: validatePass2, trigger: 'change' }],
        AreaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
        RackId: [{ required: true, message: '请选择货架', trigger: 'change' }],
        IsForbid: [{ required: true, message: '请选择禁用状态', trigger: 'blur' }],

        IsDefault: [{ required: true, message: '请选择默认状态', trigger: 'blur' }]
      },
      title: '',
      StorAreaList: [],
      LanewayList: [],
      ParentIdTreeData: [],
      strid: '',
      CengList: [],
      ceng: 0
    }
  },
  methods: {
    async getinfo(id) {
      await this.$http.post('/PB/PB_Location/GetTheData', { id: id }).then(resJson => {
        console.log(resJson)
        this.loading = false
        this.entity = resJson.Data
      })
    },
    project(row) {
      this.entity.ProjectId = row.Id
      this.entity.ProjectName = row.Code + row.Name
    },
    async getracklist(a) {
      await this.$http.post('/PB/PB_Rack/GetDataListByArea?AreaId=' + a, {}).then(resJson => {
        console.log(resJson)
        this.RackList = resJson.Data
        console.log(this.RackList)
      })
    },
    // digui(arr) {
    //   arr.forEach((item) => {
    //     if (item.children != null) {
    //       item.disabled = true
    //       this.digui(item.children)
    //     } else {
    //       item.disabled = false
    //     }
    //   })
    // },
    Rackchanges(e) {
      this.entity.Ceng = e
    },
    Rackchange(a) {
      this.entity.RackId = a
      console.log(a)
      this.loading = true
      this.ceng = 0
      this.$http.post('/PB/PB_Rack/GetTheData', { id: a }).then(resJson => {
        this.loading = false
        this.ceng = resJson.Data.Ceng
        for (var i = 0; i < ceng; i++) {
          console.log(ceng[i])
        }
      })
    },
    ListName(a) {
      console.log(a)
      // this.entity.RackId = ''
      this.getracklist(a)
    },
    init() {
      this.visible = true
      this.entity = {
        Code: '',
        Name: '',
        StorId: '',
        AreaId: '',
        RackId: '',
        IsForbid: true,
        IsDefault: false,
        Remarks: '',
        ProjectId: ''
      }
      // this.StorAreaList = []
      this.LanewayList = []
      this.RackList = []
      this.$http.post('/PB/PB_Rack/GetTheData', { id: this.entity.RackId }).then(resJson => {
        this.loading = false
        this.ceng = resJson.Data.Ceng
        for (var i = 0; i < ceng; i++) {
          console.log(ceng[i])
        }
      })
    },

    SelectOrgan(SelectOrgan) {
      console.log(SelectOrgan)
      this.strid = SelectOrgan
      this.entity.StorId = SelectOrgan
      this.entity.AreaId = ''
      this.LanewayList = []
      this.RackList = []
      this.entity.RackId = ''
      this.GetStorAreaList(SelectOrgan)
    },
    async openForm(id, title) {
      this.init()
      // this.organs();
      this.title = title
      // this.GetStorAreaList()
      // this.GetLanewayList()
      // this.GetRackList()
      await this.Organ()
      if (id) {
        this.loading = true
        await this.getinfo(id)
        await this.Organ()
        await this.GetStorAreaList(this.entity.StorId)
        await this.getracklist(this.entity.AreaId)
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/PB/PB_Location/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.$refs['form'].clearValidate()
            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    async Organ() {
      await this.$http.post('/PB/PB_PackList/GetDetpList', {}).then(resJson => {
        if (resJson.Success) {
          this.ParentIdTreeData = resJson.Data
          // this.ParentIdTreeData.forEach((item) => {
          //   if (item.children != null) {
          //     item.disabled = true
          //     this.digui(item.children)
          //   } else {
          //     item.disabled = false
          //   }
          // })
        }
      })
    },

    async GetStorAreaList(id) {
      this.loading = true
      await this.$http.post('/PB/PB_StorArea/GetDataListByStor?storId=' + id).then(resJson => {
        console.log(resJson)
        this.loading = false
        this.LanewayList = resJson.Data
      })
    },
    GetLanewayList() {
      var thisObj = this
      this.loading = true
      this.$http.post('/PB/PB_Laneway/QueryLanewayData').then(resJson => {
        this.loading = false
        thisObj.LanewayList = resJson.Data
      })
    },
    GetRackList() {
      var thisObj = this
      this.loading = true
      this.$http.post('/PB/PB_Rack/QueryRackData').then(resJson => {
        this.loading = false
        thisObj.RackList = resJson.Data
      })
    },
    DataTypeChange(val, option) {
      this.DataType = val
    }
  }
}
</script>
<style>
@media screen and (max-width: 1366px) {
}
.ant-select-tree {
  max-height: 200px;
}
</style>
